<template>
  <div class="table">
    <PageTable :loading="loading" :columns="columns" :data="dataSource" />
    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getList"
    />
    <AddRolePopup
      :dialogVisible.sync="visible"
      :role-data.sync="roleData"
      v-if="visible"
      @getList="getList"
    />
    <RoleTree
      :dialogVisible.sync="treeVisible"
      :role-id="roleId"
      v-if="treeVisible"
      @getList="getList"
    />
  </div>
</template>

<script>
import RoleTree from './RoleTree.vue'
import AddRolePopup from './AddRolePopup.vue'
export default {
  name: 'RoleTable',
  components: {
    RoleTree,
    AddRolePopup
  },
  props: {
    type: {
      type: String,
      default: 'platform'
    },
    addVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: true,
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      columns: [
        {
          label: '角色名称',
          prop: 'roleName'
        },
        {
          label: '描述',
          prop: 'description'
        },
        {
          label: '管理员数量',
          prop: 'count'
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                {row.canUpdate ? (
                  <div>
                    <span>
                      <el-button type="text" onClick={() => this.allotRole(row.id)}>
                        分配权限
                      </el-button>
                      <el-button type="text" onClick={() => this.update(row)}>
                        编辑
                      </el-button>
                    </span>
                    {row.count ? (
                      ''
                    ) : (
                      <el-button class={'ml-10'} type="text" onClick={() => this.delete(row.id)}>
                        删除
                      </el-button>
                    )}
                  </div>
                ) : (
                  ''
                )}
              </div>
            )
          }
        }
      ],
      dataSource: [],
      roleData: {},
      treeVisible: false,
      roleId: ''
    }
  },
  computed: {
    visible: {
      get() {
        return this.addVisible
      },
      set(val) {
        this.$emit('update:addVisible', val)
      }
    }
  },
  watch: {},
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    async getList() {
      const {
        data: { records, total }
      } = await this.$http.system.role.getList({ params: this.listQuery })
      this.dataSource = records
      this.total = total
      this.loading = false
    },
    // 删除
    async delete(id) {
      this.$handleConfirm({ message: '确认删除吗？' }).then(async () => {
        const { status } = await this.$http.system.role.delete(id)
        if (status === 200) {
          this.$message.success('已删除！')
          if (this.dataSource.length == 1 && this.listQuery.pageNo > 1) {
            this.listQuery.pageNo--
          }
          this.getList()
        }
      })
    },
    // 编辑
    update(row) {
      this.roleData = row
      this.visible = true
    },
    allotRole(id) {
      this.roleId = id
      this.treeVisible = true
    }
  }
}
</script>

<style lang="scss" scoped></style>
